<template>
	<div class="article-wrap">
		<div class="logo-wrap">
			<a class="logo">
				<img :src="logo">
			</a>
		</div>

		<div v-if="articleDetail !== null" class="article">
			<div class="article__header">
				<h1 class="article__title">{{ articleDetail.title }}</h1>
				<div class="article_author">
					<div class="article__left">
						{{articleDetail.userName}}
					</div>
					<div class="article__right">
						{{ convertTime(articleDetail.updateTime) }}
					</div>
				</div>
			</div>

			<div class="article__content" v-html="articleDetail.content"></div>
		</div>
			
	</div>
</template>

<script>
import { articleDetail } from "@/api/content/detail"
import { convertTime } from "@/utils/util"
export default{
	data(){
		return {
			articleId:'',
			articleDetail:null,
			logo:require("@/assets/logo.png"),
		}
	},
	mounted(){
		this.getArticle();
	},
	methods:{
		getArticle(){
			var articleId = this.$route.params.articleId;
			this.articleId = articleId;
			articleDetail(articleId).then((res)=>{
				console.log("------正文详情------")
				console.log(res)
				this.articleDetail = this.contentReplace(res.data.data);
			})
		},
		contentReplace(data){
			data.content = data.content.replace(/\<p\>\<br\>\<\/p\>/g,'');
			return data;
		},
		convertTime(time){
			return convertTime(time)
		}
	}
}	

</script>



<style lang="scss">
.article-wrap{
	height: 100%;
	overflow: auto;
	font-size: 1rem;
	.logo-wrap{
		background-color: #fff;
	    height: 8vh;
	    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
	    position: relative;
	    margin-bottom: 4px;
	    padding: 0 4vw;
	    .logo{
	    	display: inline-block;
	    	line-height: 0;
	    	height: 100%;
	    	padding: 1vh 0;
	    	img{
	    		height: 100%;
	    		width: auto;
	    	}
	    }
	}
}


.article{
	margin: 2vh 0;
	padding: 0 4vw;
	.article__header{
		.article__title{
			margin: 0;
			font-size: 6vw;
			line-height: 6vh;
		}
		.article_author{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			color: #999;
			font-size: 3.5vw;
			line-height: 4vh;
		}
	}
	.article__content{
		p,div{
			width: 100%!important;
			text-align: justify;
			font-size: 4vw;
			color: #333;
			line-height: 5vh;
			img{
				width: 100%!important;
			}
		}
		.ql-ipace-image{
			img{
				width: 100%!important;
			}
		}
	}
}

</style>